<!DOCTYPE html>
<html>
<head>
	<title>{{ .item.Title }}</title>
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="/public/css/style.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<header class="navbar">
			<section class="navbar-section">
				<a href="/" class="navbar-brand mr-2">Home</a>
			</section>
			<section class="navbar-section">
				<form method="GET" action="/">
					<div class="input-group input-inline">
						<input class="form-input" type="text" placeholder="search" name="keywords">
						<button type="submit" class="btn btn-primary input-group-btn"><i class="fa fa-search"></i></button>
					</div>
				</form>
			</section>
		</header>
	</div>
	
	<div class="container">
		<h2 class="float-left">{{ .item.Title }} </h2>
		<div class="float-right">
			<ul class="breadcrumb">
				<li class="breadcrumb-item">
					{{ if eq .preview "1" }}
					<a href="/item?preview=1&id={{ .item.Pid }}">{{ .parent.Title }}</a>
					{{ else }}
					<a href="/">Home</a>
					{{ end }}
				</li>
				<li class="breadcrumb-item">
					<a href="">{{ .item.Title }}</a>
				</li>
			</ul>
		</div>
		<div class="clearfix"></div>
		{{ if eq .item.MimeType ".mp4"}}
		<video video id="preview-player" class="video-js vjs-fluid placeholder" controls preload="auto"
			data-setup='{}'>
			<source src="/static/{{ .item.Path }}" type='video/mp4'>
			<p class='vjs-no-js'>
				To view this video please enable JavaScript, and consider upgrading to a web browser that
				<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
			</p>
		</video>
		{{ else }}
		<figure class="figure">
			<img class="img-responsive" src="/static/{{ .item.Path }}" alt="{{ .item.Title }}">
			<figcaption class="figure-caption text-center">{{ .item.Title }}</figcaption>
		</figure>
		{{ end }}

		<div class="card">
			<form class="form-horizontal" action="#forms">
				<div class="column col-9 col-sm-12">
					<div class="card-body">
						<div class="form-group">
							<div class="col-3 col-sm-12">
								<label class="form-label">Recommend</label>
							</div>
							<div class="col-9 col-sm-12">
								<input class="form-input" name="recommend" type="text" placeholder="Good Hand Job">
							</div>
						</div>
						<div class="form-group">
							<div class="col-3 col-sm-12">
								<label class="form-label">Mosaic</label>
							</div>
							<div class="col-9 col-sm-12">
								<label class="form-radio">
									<input type="radio" name="mosaic" value="yes"><i class="form-icon"></i> Yes
								</label>
								<label class="form-radio">
									<input type="radio" name="mosaic" checked="" value="no"><i class="form-icon"></i> No
								</label>
							</div>
						</div>
						<div class="form-group">
							<div class="col-3 col-sm-12">
								<label class="form-label">Taste</label>
							</div>
							<div class="col-9 col-sm-12">
								<select class="form-select" name="taste">
									<option value="heavy">Heavy</option>
									<option value="normal">Normal</option>
									<option value="fresh">Fresh</option>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<div class="col-3 col-sm-12">
								<label class="form-label">Tags</label>
							</div>
							<div class="col-9 col-sm-12">
								<input class="form-input" name="tags" type="text" placeholder="bj,hj,lily">
							</div>
						</div>
					</div>
					<div class="card-footer">
						<div class="col-6 col-mx-auto">
							<button class="btn btn-success">Approve</button>
							<button class="btn btn-error">Reject</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
<script src="/public/js/vendor/jquery.min.js"></script>
<script src='https://vjs.zencdn.net/7.5.4/video.js'></script>

</html>